<!--
 * @description: 
 * @Date: 2022-10-08 23:02:52
 * @LastEditTime: 2022-11-24 22:34:47
-->
<template>
  <div class="links-box" id="links-box">
    <div
      class="grid itxst gap-x-7 gap-y-3 grid-cols-t14 mxl:grid-cols-t12 mlg:grid-cols-t10 mmd:grid-cols-t8 mxs:grid-cols-t4"
      id="itxst"
    >
      <transition v-for="item in Arraysort(store.state.link)" :key="item?.id">
        <!-- 插件组件 -->
        <pluginVue
          :info="item"
          v-if="item?.type == 'component'"
          :data-url="item.component"
          :data-type="item?.type"
          :data-id="item?.id"
        ></pluginVue>
        <!-- 导航link组件 -->
        <Icon
          :data="item"
          class="mainBox"
          v-else-if="!item?.pid && item.type == 'icon'"
          :data-type="item?.type"
          :data-id="item?.id"
        />
      </transition>
    </div>
  </div>
</template>
<script setup>
import Icon from "@/components/icon.vue";
import pluginVue from "../../components/plugin.vue";
import * as Sortable from "Sortable";
import $ from "jquery";
import { onMounted, ref, onUpdated, nextTick } from "vue";
import { useStore } from "vuex";
import emitter from "../../util/emitter";
import { deepMerge, Arraysort } from "../../util/tools";
const store = useStore();
const list = ref(deepMerge([], store.state.link));
let MoveInfo = false;
onMounted(async () => {
  function diff() {
    var sortArr = sortable.toArray();
    let parent = $("#links-box");
    sortArr.forEach((el) => {
      let element = parent.find(`[data-id='${el}']`);
      if (element.length > 1) {
        element.slice(1).remove();
      }
    });
  }
  onUpdated(() => {
    diff();
  });
  const saveGroup = (tp) => {
    var sortArr = sortable.toArray();
    let tmp = [];
    sortArr.forEach((el, index) => {
      let info = store.getters.find(el);
      info["pid"] = null;
      info["sort"] = index;
      tmp.push(info);
    });
    store.commit("updateDiffLink", Object.assign([], tmp));
    if (tp == "update") {
    } else {
      emitter.emit("RefreshLink");
    }
  };
  var el = document.getElementById("itxst");
  if (el) {
    var ops = {
      animation: 200,
      delay: 500,
      delayOnTouchOnly: true,
      draggable: ".item",
      group: {
        name: "it",
        pull: function (evt) {
          let toId = evt.el.id;
          const type = MoveInfo.item.dataset.type;
          if (type == "icon" && toId == "footer-itxst") {
            return "clone";
          }
          return true;
        },
        put: true,
      },
      onChoose: function (env) {
        MoveInfo = env;
        window.MoveData = { type: env.item.dataset.type, canMove: false };
      },
      onChange() {
        window.MoveData.canMove = false;
      },
      onMove: function (evt) {
        if (!evt.dragged.dataset.type && !evt.related.dataset.url) return true; //没有目标则禁止放行
        if (evt.dragged.dataset.type == "component") {
          //如果拖拽的是组建程序的排序直接放行
          return true;
        }
        if (evt.related.dataset.url == "iconGroup") {
          if (window.MoveData.canMove == true) {
            return true;
          }
          if (window.MoveData.canMove == "lock") {
            return false;
          }
          return false;
        } else {
          return true;
        }
      },
      onAdd(evt) {
        saveGroup();
        evt.clone.remove();
      },
      //拖动结束
      onUpdate: function (evt) {
        saveGroup("update");
      },
    };
    var sortable = window.Sortable.create(el, ops);
  }
});
</script>
<style>
.chosen {
  opacity: 0;
}
</style>
